<!-- 这个是整个tabbar的整合组件-->
<template>
  <tabbar>
      <tabbaritem path="/home" :activeColor=activeColor>
      <!-- html里面引用别名用~符号 -->
        <img src="~assets/img/tabbar/home.svg" alt="首页" slot="item-dead-icon">
        <img src="~assets/img/tabbar/home_active.svg" alt="首页" slot="item-active-icon">
        <div slot="item-text">首页</div>
      </tabbaritem>
      <tabbaritem path="/category" :activeColor=activeColor>
        <img src="~assets/img/tabbar/category.svg" alt="目录" slot="item-dead-icon">
        <img src="~assets/img/tabbar/category_active.svg" alt="目录" slot="item-active-icon">
        <div slot="item-text">目录</div>
      </tabbaritem>
       <tabbaritem path="/cart" :activeColor=activeColor>
        <img src="~assets/img/tabbar/shopcart.svg" alt="购物车" slot="item-dead-icon">
        <img src="~assets/img/tabbar/shopcart_active.svg" alt="购物车" slot="item-active-icon">
        <div slot="item-text">购物车</div>
      </tabbaritem>
    <tabbaritem path="/profile" activeColor="deepPink">
      <img slot="item-dead-icon" src="~assets/img/tabbar/profile.svg" alt="">
      <img slot="item-active-icon" src="~assets/img/tabbar/profile_active.svg" alt="">
      <div slot="item-text">我的</div>
    </tabbaritem>
  </tabbar>
</template>

<script>

import Tabbar from 'components/common/tabbar/tabbar.vue';
import Tabbaritem from 'components/common/tabbar/tabbaritem.vue';

export default {
    name:'maintabbar',
    components: {
        Tabbar,
        Tabbaritem,
    },
    data() {
        return {
            activeColor: 'pink'
        }
    },
}
</script>

<style>

</style>